<template>
    <div>
        <div id="search">
            <el-form :inline="true" :model="logSearch" class="demo-form-inline">
                <el-form-item label="操作人">
                    <el-input v-model="logSearch.username" placeholder="请输入操作人"></el-input>
                </el-form-item>
                <el-form-item label="操作地址">
                    <el-input v-model="logSearch.ip" placeholder="请输入IP"></el-input>
                </el-form-item>
                <el-form-item label="系统模块">
                    <el-input v-model="logSearch.model" placeholder="请输入模块名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearchSubmit">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-share" @click="exportLogSubmit">导出日志</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div id="header-bth">
            <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteLogs">批量删除</el-button>
        </div>

        <div id="log-table">
            <el-table
                    :data="tableData"
                    stripe

                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column label="日志编号">
                    <template slot-scope="scope">
                        <span style="margin-left: 20px">{{ scope.row.id}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="系统模块">
                    <template slot-scope="scope">
                        <span style="margin-left: 20px">{{ scope.row.model}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作类型">
                    <template slot-scope="scope">
                        <span>{{ scope.row.description }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作人员">
                    <template slot-scope="scope">
                        <span>{{ scope.row.username }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作地址">
                    <template slot-scope="scope">
                        <span>{{ scope.row.ip}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作参数" width="200px" show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.params}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="资源路径" show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.url}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="消耗时间(ms)">
                    <template slot-scope="scope">
                        <span>{{ scope.row.timeConsuming}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作日期" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="nav-page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="pageSizes"
                    :page-size="logSearch.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {batchDeleteLogApi, exportLogExcelApi, logPageApi,} from "@/request/api";
    import fileDownload from "js-file-download";
    export default {
        name: "OperationLogView",
        data() {
            return {
                tableData:[],
                pageSizes:[3,5,10,15],
                total:20,
                logSearch:{
                    limit:3,
                    currentPage:1
                },
                /*复选框数据*/
                multipleSelection: []
            }
        },
        methods: {
            // 导出系统日志
            exportLogSubmit(){
                exportLogExcelApi(this.logSearch).then(response=>{
                    fileDownload(response,"log.xlsx")
                })
            },
            handleSelectionChange(val){
                this.multipleSelection = val.map(row => row.id)
            },
            deleteLogs(){
                if (this.multipleSelection.length==0){
                    this.$message.warning("请至少选择一条数据")
                    return
                }
                batchDeleteLogApi(this.multipleSelection).then(response=>{
                    if (response.code == 200) {
                        this.$message.success(response.msg)
                        this.list()
                        return
                    }
                    this.$message.warning(response.msg)
                }).catch(error=>{
                    this.$message.error("请求失败")
                })
            },
            //切换每页显示条数
            handleSizeChange(val){
                this.logSearch.limit=val
                this.list()
            },
            // 切换页码
            handleCurrentChange(val){
                this.logSearch.currentPage=val
                this.list()
            },
            // 搜索
            onSearchSubmit(){
                this.logSearch.currentPage=1
                this.list()
            },
            list(){
                logPageApi(this.logSearch).then(response=>{
                    if (response.code == 200) {
                        this.tableData = response.data.currentPageData
                        this.total = response.data.total
                    }
                }).catch(error=>{
                    this.$message.error("请求失败")
                })
            }
        },
        created() {
            this.list()
        }
    }
</script>

<style scoped>
    #search {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #eee;
    }

    #search, #header-bth, #nav-page {
        margin: 15px;
    }

    #log-table {
        width: 100%;
    }
    .el-button {
        margin-left: 5px;
        margin-right: 5px;
    }
</style>
